<template>
  <div>
    <el-row>
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="教师名称">
          <el-input v-model="queryForm.name" placeholder="教师名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getListTeacher(queryForm)">查询</el-button>
          <el-button @click="resetTeacherQuery">重置</el-button>
          <el-button type="primary" plain @click="openAddTeacherDialog">添加</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column prop="teacherName" label="姓名"/>
        <el-table-column prop="school" label="所在学校">
          <template slot-scope="scope">{{ scope.row.school || '-' }}</template>
        </el-table-column>
        <el-table-column prop="subject" label="科目">
          <template slot-scope="scope">{{ scope.row.subject || '-' }}</template>
        </el-table-column>
        <el-table-column prop="profession" label="专业">
          <template slot-scope="scope">{{ scope.row.profession || '-' }}</template>
        </el-table-column>
        <el-table-column prop="introduce" label="简介">
          <template slot-scope="scope">{{ scope.row.introduce || '-' }}</template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="250">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text">编辑</el-button>
            <el-button @click="handleDel(scope.row)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background    
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[4,5,6,7]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" 
        style="margin-top: 30px;"/>
    </el-row>


    <el-dialog :visible.sync="teacherDialogVisible" width="400px" :title="mode=='edit'?'编辑教师':'添加教师'" @closed="cancelDialog">
      <el-form :model="teacherForm" label-position="left" label-width="50px">
        <el-form-item label="姓名" prop="teacherName">
          <el-input v-model="teacherForm.teacherName"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" v-if="mode == 'add'">
          <el-input v-model="teacherForm.email"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender" v-if="mode == 'add'">
          <el-select v-model="teacherForm.gender" placeholder="请选择">
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>  
        </el-form-item>
        <el-form-item label="电话" prop="phone" v-if="mode == 'add'">
          <el-input v-model="teacherForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="学校" prop="school">
          <el-input v-model="teacherForm.school"></el-input>
        </el-form-item>
        <el-form-item label="科目" prop="subject">
          <el-input v-model="teacherForm.subject"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="introduce">
          <el-input v-model="teacherForm.introduce"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="profession">
          <el-input v-model="teacherForm.profession"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="cancelDialog">取消</el-button>
          <el-button type="primary" @click="confirmSubmitTeacher(teacherForm)">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { addTeacher, editTeacher, listTeacher, removeTeacher } from '@/api/teacher';
import { Message, MessageBox } from 'element-ui';

export default {
  data(){
    return{
      mode:'add',
      teacherDialogVisible: false,
      currentPage:undefined,
      total:undefined,
      sexOptions:[
        {label:'男',value:'M'},
        {label:'女',value:'F'},
      ],
      queryForm:{
        name:'',
        pageNum:1,
        pageSize:5
      },
      teacherForm:{},
      tableData:[{
        activityName:'班级1',
        classDesc:'',
        name:'',
        teacherName:''
      }]
    }
  },
  methods:{
    getListTeacher(){
      listTeacher(this.queryForm).then(res=>{
        this.tableData = res.row
      }).catch(()=>{})
    },
    resetTeacherQuery(){
      this.queryForm = {
        name:'',
        pageNum:1,
        pageSize:5
      }
      this.getListTeacher()
    },
    handleEdit(data){
      this.mode = 'edit'
      this.teacherDialogVisible = true
      this.teacherForm = JSON.parse(JSON.stringify(data))
    },
    handleDel(data){
      MessageBox.alert(`确定要删除教师<${data.teacherName}>吗?`).then(()=>{
        removeTeacher(data.id).then(res=>{
          Message.success(res.msg)
          this.getListTeacher()
        }).catch(()=>{})
      }).catch(()=>{})
    },
    cancelDialog(){
      this.teacherDialogVisible = false
      this.teacherForm = {}
    },
    confirmSubmitTeacher(data){
      if(this.mode == 'add'){
        addTeacher(data).then(res=>{
          Message.success(res.msg)
          this.teacherDialogVisible = false
          this.teacherForm = {}
          this.getListTeacher()
        }).catch(()=>{})
      }else if(this.mode == 'edit'){
        editTeacher(data).then(res=>{
          Message.success(res.msg)
          this.teacherDialogVisible = false
          this.teacherForm = {}
          this.getListTeacher()
        }).catch(()=>{})
      }
    },
    openAddTeacherDialog(){
      this.mode = 'add'
      this.teacherDialogVisible = true
    },
    handleSizeChange(size){
      this.queryForm.pageSize=size
      this.getListClass(this.queryForm)
    },
    handleCurrentChange(page){
      this.queryForm.pageNum=page
      this.getListClass(this.queryForm)
    },
  },
  created(){
    this.getListTeacher()
  }
}
</script>

<style>

</style>